<template>
    <div>
        <!-- <el-form label-width="110px" size="small">
            <el-col class="form-row"> -->
        <el-form-item label="价格模式:" v-if="!notShowPriceType">
            <el-select name="价格模式" v-model="form.orderPriceType" size="mini" disabled>
                <el-option v-for="i in investPriceSelectData" :key="i.dictKey" :label="i.dictKey + ' ' + i.dictKeyName" :value="i.dictKey">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="当前市价:" :class="['font-color-' + textColor]" class="icon-form-item">
            <el-input v-model="calcPrice" disabled>
                <template slot="append">元</template>
            </el-input>
            <!-- <i v-if="!notMesh" class="el-icon-refresh-right" @click="getCalcPrice"></i> -->
        </el-form-item>
        <el-form-item label="回购利率:">
            <RiskInputNumber
                :input="form.orderRate"
                :inputAfter="'%'"
                :colorStyle="textColor"
                :precision="2"
                :maxlength="7"
                :field="'orderRate'"
                @getInputNumber="getInputNumber(arguments)"
            >
            </RiskInputNumber>
        </el-form-item>
        <el-form-item label="指令金额:">
            <RiskInputNumber
                :input="form.orderBalance"
                :inputAfter="'元'"
                :colorStyle="textColor"
                :precision="2"
                :maxlength="12"
                :field="'orderBalance'"
                :disabled="targetType == '1'"
                @getInputNumber="getInputNumber(arguments)"
            >
            </RiskInputNumber>
        </el-form-item>
        <!-- </el-col>
        </el-form> -->
    </div>
</template>
<script lang="ts">
import Invest from '@/common/dict/invest';
import { objToArr, SGU_CACHE } from '@/utils/diction-const-util';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import RiskInputNumber from '@/pages/risk-measure/components/risk-input-number.vue';
import { SelectOptionItemData } from '@/pages/risk-time/types/SelectOptionItemData';

@Component({
    name: 'BuyBackForm',
    components: {
        RiskInputNumber,
    },
})
// 回购指令表单
export default class BuyBackForm extends Vue {
    @Prop()
    stockCode: string;
    @Prop()
    formDetail: any;
    @Prop()
    textColor: string;
    @Prop()
    notShowPriceType: boolean; // 是否显示价格模式(不同页面使用该组件用到该变量)
    @Prop()
    targetType: string; // 目标类型
    @Prop()
    refreshNumber: number;

    form = {
        // businessType: '',
        orderBalance: '', // 指令金额
        orderPriceType: '2', // 价格模式
        orderRate: '', // 回购利率
    };

    orderRate: string = '';
    calcPrice: number = 0;
    investPriceSelectData: any[] = []; // 价格模式下拉数据

    @Watch('refreshNumber', { immediate: true })
    onWatchRefreshNumber() {
        if (this.refreshNumber) {
            this.getCalcPrice('2');
        }
    }

    @Watch('form', { immediate: true, deep: true })
    setForm() {
        this.$emit(
            'getForm',
            {
                // businessType: this.form.businessType,
                orderRate: this.form.orderRate,
                orderBalance: this.form.orderBalance,
                orderPriceType: this.form.orderPriceType,
            },
            'buyBackValues'
        );
        // this.$emit('getForm', this.form, 'buyBackValues');
    }

    @Watch('formDetail', { immediate: true, deep: true })
    getForm() {
        for (const key in this.formDetail) {
            this.form[key] = this.formDetail[key];
        }

        // if (this.formDetail.orderPriceType === '2') {
        //     this.form.orderRate = '';
        //     this.orderRate = this.formDetail.orderPrice;
        // }
    }

    @Watch('stockCode', { immediate: true, deep: true })
    async onWatchStockCode(newValue, oldValue) {
        await this.getCalcPrice('2');
    }

    async mounted() {
        // 获取价格模式下拉框数据
        this.investPriceSelectData = await SGU_CACHE('PriceType', '/dict/list/code/Y_000237', []);
    }

    /**
     * 获取指令价格为空时的计算价格，下面是取值顺序
     * lastPrice: 最新价
     * openPrice: 开盘价
     * closePrice: 昨收盘价
     * facePrice: 面值
     * type: 1-手动刷新(点击刷新图标)，2-自动刷新(切换证券时)
     */
    async getCalcPrice(type: string) {
        if (this.stockCode) {
            this.$axios
                .post('/dataEngine/getStockPrice/' + this.stockCode)
                .then((result: any) => {
                    this.calcPrice = result;
                    if (type == '1') {
                        if (this.form.orderPriceType == '2') {
                            this.handleOrderPriceChange('');
                        }
                        this.yh_message_success('刷新成功');
                    }
                })
                .catch(() => {
                    this.calcPrice = null;
                });
        } else {
            this.calcPrice = null;
        }
    }

    getInputNumber(args: any) {
        let value = args[0];
        let field = args[1];
        this.form[field] = value;
        if (field === 'orderRate') {
            this.handleOrderPriceChange(value);
        }
    }

    handleOrderPriceChange(value: string) {
        // 修改指令价格
        if (value) {
            // 根据输入值计算
            this.form.orderPriceType = '1';
        } else {
            this.form.orderPriceType = '2';
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-time/styles/order-form';
</style>
